// 基本信息
import { getServerList } from "@/api/modules/forward/forwardServer";
import DialogBox from "@/components/DialogBox";
import SelectDeviceListAll from "@/components/Sansan/SelectDeviceListAll";
import SelectProductList from "@/components/Sansan/SelectProductList";
import { ElForm, ElMessage, ElTooltip } from "element-plus";
import { getCurrentInstance, defineComponent, PropType, ComponentInternalInstance } from "vue";
import JsonEditer from "@/components/JsonForm/JsonEditer.vue";
interface ServerForm {
	[key: string]: any;
}
export default defineComponent({
	props: {
		width: String,
		title: String,
		detail: {
			type: Object as PropType<ServerForm>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const formRule = reactive({
			name: [{ required: true, message: proxy?.$t("forward_ruledialog.formrule.name"), trigger: "change" }],
			server: [{ required: true, message: proxy?.$t("forward_ruledialog.formrule.server"), trigger: "change" }]
		});
		const state = reactive({
			serverList: [] as any[]
		});
		watch(
			() => props.detail,
			() => {
				loadServerList();
			}
		);
		const loadServerList = async () => {
			let { result } = await getServerList({ type: props.detail.serverType });
			state.serverList = result as any[];
		};
		const validData = () => {
			if (props.detail.serverType == "DB" && JSON.stringify(props.detail.variableMap) == "{}") {
				return ElMessage.error(proxy?.$t("forward_ruledialog.elmsg.valid"));
			}
			formRef.value?.validate((valid: boolean) => {
				if (valid) {
					emit("submit");
				}
			});
		};
		return () => {
			return (
				<DialogBox
					{...attrs}
					width={props.width}
					title={props.title}
					onConfirm={() => {
						validData();
					}}
				>
					<div class="flex">
						<el-form class="flex-1" model={props.detail} ref={formRef} rules={formRule} label-width="100px">
							<el-form-item label={proxy?.$t("forward_ruledialog.form_label.name")} prop="name">
								<el-input v-model={props.detail.name} />
							</el-form-item>
							<el-form-item label={proxy?.$t("forward_ruledialog.form_label.server_type")} prop="serverType">
								<el-radio-group v-model={props.detail.serverType} onChange={() => loadServerList()}>
									<el-radio label="MQTT">MQTT</el-radio>
									<el-radio label="HTTP">HTTP</el-radio>
									<el-radio label="DB">DB</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label={proxy?.$t("forward_ruledialog.form_label.server")} prop="server">
								<el-select class="w-full" v-model={props.detail.server} value-key="id">
									{state.serverList.map((item: any) => {
										return <el-option label={item.name} value={item} />;
									})}
								</el-select>
							</el-form-item>
							<el-form-item label={proxy?.$t("forward_ruledialog.form_label.target")} prop="targetType">
								<el-radio-group v-model={props.detail.targetType}>
									<el-radio label="product">{proxy?.$t("forward_ruledialog.radio.product")}</el-radio>
									<el-radio label="device">{proxy?.$t("forward_ruledialog.radio.device")}</el-radio>
								</el-radio-group>
							</el-form-item>
							{props.detail.targetType == "product" && (
								<el-form-item label={proxy?.$t("forward_ruledialog.form_label.product")} prop="productModel">
									<SelectProductList v-model={props.detail.productModel} detail={props.detail} />
								</el-form-item>
							)}
							{props.detail.targetType == "device" && (
								<el-form-item label={proxy?.$t("forward_ruledialog.form_label.devsn")} prop="devSn">
									<SelectDeviceListAll v-model={props.detail.devSn} detail={props.detail} />
								</el-form-item>
							)}

							<el-form-item
								prop="variableMap"
								v-slots={{
									label: () => {
										return (
											<div>
												{proxy?.$t("forward_ruledialog.form_label.var")}
												<ElTooltip
													raw-content
													v-slots={{
														content: () => {
															return (
																<pre>
																	{props.detail.serverType == "MQTT" && proxy?.$t("forward_ruledialog.tooltip.tip_mqtt")}
																	{props.detail.serverType == "HTTP" && proxy?.$t("forward_ruledialog.tooltip.tip_http")}
																	{props.detail.serverType == "DB" && proxy?.$t("forward_ruledialog.tooltip.tip_db")}
																</pre>
															);
														}
													}}
												>
													<i class="iconfont iconhelp-circle pl-2 "></i>
												</ElTooltip>
											</div>
										);
									}
								}}
							>
								<JsonEditer v-model:data={props.detail.variableMap} class="flex-1" style="height:40vh" />
							</el-form-item>
						</el-form>
					</div>
				</DialogBox>
			);
		};
	}
});
